import cx from 'classnames';
import React from 'react';
import styles from './index.less';

interface ViewProps extends React.HTMLAttributes<HTMLSpanElement> {
  active?: boolean;
}
export default class LoadingDot2 extends React.Component<ViewProps> {
  public render() {
    const { active, className, children, ...restProps } = this.props;

    return (
      <div
        className={cx(styles.box, className, {
          [styles.active]: active,
        })}
        {...restProps}
      >
        <div
          className={styles.viewBox}
          style={{
            filter: 'url(#svgFilterDot)',
          }}
        >
          <div className={styles.g0}></div>
          <div className={styles.g1}></div>
          <div className={styles.g2}></div>
        </div>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          version="1.1"
          width="800"
          style={{
            position: 'fixed',
            visibility: 'hidden',
            top: '-1000px',
            pointerEvents: 'none',
          }}
        >
          <defs>
            <filter id="svgFilterDot">
              <feGaussianBlur
                in="SourceGraphic"
                stdDeviation="7"
                result="blur"
              />
              <feColorMatrix
                in="blur"
                mode="matrix"
                values="
               1 0 0 0 0 
               0 1 0 0 0  
               0 0 1 0 0  
               0 0 0 26 -12"
                result="svgFilterDot"
              />
            </filter>
          </defs>
        </svg>
      </div>
    );
  }
}
